@import "function";
@import "./config";
/* Break-points
 -------------------------- */
@mixin res($key, $map: $--breakpoints) {
    // 循环断点Map，如果存在则返回
    @if map-has-key($map, $key) {
        @media only screen and #{inspect(map-get($map, $key))} {
            @content;
        }
    } @else {
        @warn "Undefeined points: `#{$map}`";
    }
}

@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state} {
            @content;
        }
    }
}
@mixin utils-clearfix {
    $selector: &;

    @at-root {
        #{$selector}::before,
        #{$selector}::after {
            display: table;
            content: "";
        }
        #{$selector}::after {
            clear: both
        }
    }
}
@mixin utils-user-select($value) {
    -moz-user-select: $value;
    -webkit-user-select: $value;
    -ms-user-select: $value;
}

@mixin b($block) {
    $B: $namespace+'-'+$block !global;

    .#{$B} {
        @content;
    }
}
@mixin m($modifier) {
    $selector: &;
    $currentSelector: "";
    @each $unit in $modifier {
        $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
    }

    @at-root {
        #{$currentSelector} {
            @content;
        }
    }
}
@mixin e($element) {
    $E: $element !global;
    $selector: &;
    $currentSelector: "";
    @each $unit in $element {
        $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
    }

    @if hitAllSpecialNestRule($selector) {
        @at-root {
            #{$selector} {
                #{$currentSelector} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$currentSelector} {
                @content;
            }
        }
    }
}

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    border-radius: $border-radius;
    &.is-round {
        padding: $padding-vertical $padding-horizontal;
    }
}

/* Scrollbar
 -------------------------- */
@mixin scroll-bar {
    $--scrollbar-thumb-background: #b4bccc;
    $--scrollbar-track-background: #fff;

    &::-webkit-scrollbar {
        z-index: 11;
        width: 6px;

        &:horizontal {
            height: 6px;
        }

        &-thumb {
            border-radius: 5px;
            width: 6px;
            background: $--scrollbar-thumb-background;
        }

        &-corner {
            background: $--scrollbar-track-background;
        }

        &-track {
            background: $--scrollbar-track-background;

            &-piece {
                background: $--scrollbar-track-background;
                width: 6px;
            }
        }
    }
}

/* Placeholder
 -------------------------- */
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content
    }

    &::-moz-placeholder {
        @content
    }

    &:-ms-input-placeholder {
        @content
    }
}

@mixin extend-rule($name) {
    @extend #{'%shared-'+$name};
}

@mixin share-rule($name) {
    $rule-name: '%shared-'+$name;

    @at-root #{$rule-name} {
        @content
    }
}
@mixin utils-vertical-center {
    $selector: &;

    @at-root {
        #{$selector}::after {
            display: inline-block;
            content: "";
            height: 100%;
            vertical-align: middle
        }
    }
}
@mixin pseudo($pseudo) {
    @at-root #{&}#{':#{$pseudo}'} {
        @content
    }
}
